<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
    			<!-- slides -->
   	 		<swiper-slide v-for='item of list' :key='item.id' v-if="showSwiper">
   	 			<img class="swiper-img" :src="item.imgUrl"/>
   	 		</swiper-slide>
    			
    			<!-- Optional controls -->
    			<div class="swiper-pagination"  slot="pagination"></div>
   			<!--<div class="swiper-button-prev" slot="button-prev"></div>
    			<div class="swiper-button-next" slot="button-next"></div>-->
   		 	<!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
		</swiper>
	</div>
</template>

<script>
export default {
	name:'HomeSwiper',
	props:{
		list:Array
	},
	data:function(){
		return {
			swiperOption:{
				pagination:'.swiper-pagination',
//				支持循环轮播
				loop:true,
				autoplayDisableOnInteraction: false,
				autoplay:true,
				speed:2500,
			}
		}
	},
	computed:{
//		解决轮播图默认不从第一张图片显示的问题,数据数组为空时不加载控件
		showSwiper(){
			return this.list.length
		}
	}
}
</script>

<style lang="stylus" scoped>
/*设置样式穿透,保证 wrapper 下的该类样式按指定要求改变*/
.wrapper >>> .swiper-pagination-bullet-active {
	background: white;
}
.wrapper
	
	/*设置宽高比例*/
	overflow:hidden
	width:100%
	height:0
	padding-bottom:31.25%
	
	.swiper-img 
		width:100%


</style>